<template>
	<view>
		<view class="container p-bottom" v-if="detail.active_id">
			<!-- 商品信息 -->
			<view class="header dis-flex">
				<view class="header_lf" @tap="onTargetGoods"><image :src="goods.goods_image"></image></view>
				<view class="header_rt">
					<view class="goods-name" @tap="onTargetGoods">
						<text class="twolist-hidden">{{ goods.goods_name }}</text>
					</view>
					<view class="goods-price">
						<text class="f-26 col-m">￥</text>
						<text class="m-price">{{ goods.goods_sku.sharing_price }}</text>
						<text class="line-price" v-if="goods.goods_sku.line_price > 0">￥{{ goods.goods_sku.line_price }}</text>
					</view>
					<view class="goods-tag">
						<text class="tag-item">{{ detail.people }}人团</text>
						<text class="tag-item" v-if="goods.goods_sku.line_price > 0">拼团省{{ goods.goods_sku.diff_price }}</text>
					</view>
				</view>
			</view>
			<!-- 拼团成员 -->
			<view class="main">
				<!-- 拼团状态 (成功、失败) -->
				<view v-if="detail.status.value == 30" class="main_status main_status__fail">
					<text class="status-icon iconfont icon-shibai"></text>
					<text>超过有效时间，拼团失败</text>
				</view>
				<view v-if="detail.status.value == 20" class="main_status main_status__success">
					<text class="status-icon iconfont icon-success"></text>
					<text>拼团已成功</text>
				</view>

				<!-- 参团用户 -->
				<view class="main_user">
					<view v-for="(item, index) in detail.users" :key="item.user.user_id + '-' + index" class="user-item">
						<image :src="item.user.avatarUrl"></image>
						<view v-if="item.is_creator == 1" class="user-role"><text>团长</text></view>
					</view>
					<!-- 虚位以待 -->
					<view v-for="(item, index) in detail.surplus_people" :key="index" class="user-item user-item__wait dis-flex flex-x-center flex-y-center"><text class="iconfont icon-wenhao"></text></view>
				</view>

				<!-- 拼单状态：拼团中 -->
				<view v-if="detail.status.value == 10" class="main_status main_tiem">
					<text>还差</text>
					<text class="main_timer_color">{{ detail.surplus_people }}</text>
					<text>个名额，</text>
					<view class="tui-countdown-content" v-for="(item, index) in countDownList" :key="index">
						<!-- <text class="tui-conutdown-box">{{item.day}}</text>: -->
						<text class="tui-conutdown-box">{{ item.hou }}</text>
						:
						<text class="tui-conutdown-box">{{ item.min }}</text>
						:
						<text class="tui-conutdown-box tui-countdown-bg">{{ item.sec }}</text>
					</view>
					<text>后结束</text>
				</view>

				<!-- 操作按钮 -->
				<block v-if="detail.status.value == 10">
					<button v-if="!is_join" @tap="onTriggerOrder">立即参团</button>
					<button v-else open-type="share">立即分享</button>
				</block>
				<button v-else @tap="onTargetGoods">去开团</button>
			</view>
			<!-- 拼团须知 -->
			<view class="notice" @tap="onToggleRules">
				<text class="f-30">拼团须知</text>
				<text class="t-brief">{{ setting.basic.rule_brief }}</text>
				<text class="icon-arrow"></text>
			</view>
			<!-- 更多拼团 -->
			<view class="content" v-if="goodsList.data.length">
				<view class="content_top" @tap="onTargetIndex">
					<text class="f-30">更多拼团</text>
					<text class="icon-arrow"></text>
				</view>
				<view v-for="(item, index) in goodsList.data" :key="index" class="content_main dis-flex" @tap="onTargetGoods" :data-id="item.goods_id">
					<view class="goods-image"><image :src="item.goods_image"></image></view>
					<view class="goods-detail">
						<view class="goods-name twolist-hidden">
							<text>{{ item.goods_name }}</text>
						</view>
						<view class="goods-sales">
							<text>已团{{ item.goods_sales }}件</text>
						</view>
						<view class="goods-detail_bottom clear">
							<view class="bottom-right onelist-hidden fl dis-flex flex-y-end">
								<text class="f-24 col-m">￥</text>
								<text class="goods-price col-m">{{ item.goods_sku.sharing_price }}</text>
								<text class="line-price">￥{{ item.goods_sku.line_price }}</text>
							</view>
							<button class="fr btn-navie">去开团</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<shortcut right="50rpx" bottom="200rpx"></shortcut>
		<!-- 确认购买弹窗 -->
		<popup :show="showBottomPopup" type="bottom" bindclose="onToggleTrade">
			<view class="popup__trade">
				<!-- 关闭按钮 -->
				<view class="trade-close dis-flex flex-x-center flex-y-center" @tap="onToggleTrade"><text class="iconfont icon-close f-26"></text></view>
				<!-- 主体信息 -->
				<view class="trade-main">
					<view class="goods-info dis-flex">
						<!-- 图片名称 -->
						<view class="goods-image" @tap="onPreviewSkuImage"><image :src="skuCoverImage"></image></view>
						<view class="flex-box">
							<view class="money-box">
								<text class="col-m f-26">￥</text>
								<text class="price col-m">{{ sharing_price }}</text>
								<text class="del" v-if="line_price > 0">￥{{ line_price }}</text>
							</view>
							<view class="goods-stock dis-flex">
								<text class="flex-box f-26 col-7">库存：{{ stock_num }}</text>
							</view>
						</view>
					</view>
					<!-- 规格列表 -->
					<view class="goods-list-box" scroll-y="true" v-if="goods.spec_type == 20">
						<view class="cf tmall-types" v-for="(attr, attr_idx) in goodsMultiSpec.spec_attr" :key="attr_idx">
							<view class="tipstxt" :data-id="attr.group_id">{{ attr.group_name }}</view>
							<view class="cf cartypelist" v-for="(item, item_idx) in attr.spec_items" :key="item_idx">
								<view v-if="item.checked">
									<form bindsubmit="onSwitchSpec" report-submit="true" :data-attr-idx="attr_idx" :data-item-idx="item_idx">
										<button formType="submit" class="btn-normal">
											<view class="cartypeitem cur">{{ item.spec_value }}</view>
										</button>
									</form>
								</view>
								<view v-else>
									<form bindsubmit="onSwitchSpec" report-submit="true" :data-attr-idx="attr_idx" :data-item-idx="item_idx">
										<button formType="submit" class="btn-normal">
											<view class="cartypeitem">{{ item.spec_value }}</view>
										</button>
									</form>
								</view>
							</view>
						</view>
					</view>
					<!-- 购买数量 -->
					<view class="buy_number">
						<view class="buyNumber f-26"><text>购买数量</text></view>
						<view class="selectNumber">
							<form bindsubmit="onDecGoodsNumber" report-submit="true"><button formType="submit" class="default" :class="{ 'default-active': !(goods_num > 1) }" type="default">-</button></form>
							<input type="number" v-model="goods_num" />
							<form bindsubmit="onIncGoodsNumber" report-submit="true"><button formType="submit" class="default" type="default">+</button></form>
						</view>
					</view>
				</view>
				<!-- 底部操作栏 -->
				<view class="footer-fixed f-30">
					<block v-if="stock_num > 0">
						<view class="order-bt dis-flex flex-x-center flex-y-center" @tap="onCheckout" data-type="buyNow"><text>确定</text></view>
					</block>
					<view class="default-btn" v-else>暂无现货</view>
				</view>
			</view>
		</popup>
		<custom-dialog ref="ruleDialog"></custom-dialog>
	</view>
</template>

<script>
import Share from '@/utils/Share.js';
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
import shortcut from '@/components/shortcut/shortcut.vue';
import popup from '@/components/popup/index.vue';

import Sharing from '@/utils/extend/sharing.js';
import customDialog from '@/components/dialog/index.vue';
import Dialog from '@/components/dialog/dialog.js';
export default {
	components: { popup, shortcut, customDialog },
	data() {
		return {
			detail: {}, // 拼单详情
			goods: {},
			goodsList: [], // 更多拼团列表
			setting: {}, // 拼团设置
			is_join: false, // 当前用户是否已参团
			is_creator: false, // 当前是否为创建者(团长)

			goods_price: 0, // 商品价格
			line_price: 0, // 划线价格
			stock_num: 0, // 库存数量

			goods_num: 1, // 商品数量
			goods_sku_id: 0, // 规格id
			goodsMultiSpec: {}, // 多规格信息

			countDownList: [],
			actEndTimeList: [],
			showBottomPopup: false,
			skuCoverImage: '',
			sharing_price: ''
		};
	},
	onLoad(option) {
		// 获取拼团详情
		this.getActiveDetail(option.active_id);
		// 获取拼团设置
		this.getSetting();
	},
	/**
	 * 分享当前页面
	 */
	onShareAppMessage() {
		// 构建页面参数
		let params = Tools.getShareUrlParams({
			active_id: this.detail.active_id
		});
		return {
			title: this.goods.goods_name,
			path: '/pages/sharing/active/index?' + params
		};
	},
	onNavigationBarButtonTap(e) {
		Share.send(Tools.getShareUrl(Tools.getPagePath(), { active_id: this.detail.active_id }));
	},
	methods: {
		setShare() {
			// #ifdef H5
			this.$wechat.updateAppMessageShareData({
				title: this.detail.goods_name, // 分享标题
				desc: '', // 分享描述
				link: Tools.getShareUrl(Tools.getPagePath(), { active_id: this.detail.active_id }), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: this.goods.goods_image, // 分享图标
			});
			this.$wechat.onMenuShareTimeline({
				title: this.detail.goods_name, // 分享标题
				link: Tools.getShareUrl(Tools.getPagePath(), { active_id: this.detail.active_id }), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: this.goods.goods_image, // 分享图标
			});
			// #endif
		},
		/**
		 * 获取拼团设置
		 */
		getSetting() {
			Sharing.getSetting(setting => {
				this.setting = setting;
			});
		},
		/**
		 * 获取拼团详情
		 */
		getActiveDetail(active_id) {
			this.$get(this.$api.getSharingActiveDetail, { active_id }, res => {
				this.createPageData(res.data);
				this.$nextTick(() => {
					// #ifdef H5
					this.$wechat.initJssdk(this.setShare());
					// #endif
				});
			});
		},
		/**
		 * 创建页面数据
		 */
		createPageData(data) {
			// 商品详情
			let goodsDetail = data.goods;
			// 当前用户是否已参团
			data['is_join'] = this.checkUserIsJoin(data.detail.users);
			console.log(data['is_join']);
			// 当前用户是否为创建者
			data['is_creator'] = !!(data.detail.creator_id == Tools.getUserId());
			// 拼团结束时间
			data['actEndTimeList'] = [data.detail.end_time.text];

			// 商品价格/划线价/库存
			data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
			data.sharing_price = goodsDetail.goods_sku.sharing_price;
			data.goods_price = goodsDetail.goods_sku.goods_price;
			data.line_price = goodsDetail.goods_sku.line_price;
			data.stock_num = goodsDetail.goods_sku.stock_num;
			// 商品封面图(确认弹窗)
			data.skuCoverImage = goodsDetail.goods_image;
			// 多规格商品封面图(确认弹窗)
			if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
				data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
			}
			// 初始化商品多规格
			if (goodsDetail.spec_type == 20) {
				data.goodsMultiSpec = this.initGoodsDetailData(goodsDetail.goods_multi_spec);
			}
			this.actEndTimeList = data.actEndTimeList;
			this.detail = data.detail;
			this.goods = data.goods;
			this.goodsMultiSpec = data.goodsMultiSpec;
			this.goodsList = data.goodsList;
			this.goods_price = data.goods_price;
			this.goods_sku_id = data.goods_sku_id;
			this.is_creator = false;
			this.is_join = false;
			this.line_price = data.line_price;
			this.sharing_price = data.sharing_price;
			this.skuCoverImage = data.skuCoverImage;
			this.stock_num = data.stock_num;
			// 赋值页面数据
			// _this.setData(data);
			// 执行倒计时函数
			this.$nextTick(() => {
				this.onCountDown();
			});
		},
		/**
		 * 小于10的格式化函数
		 */
		timeFormat(param) {
			return param < 10 ? '0' + param : param;
		},

		/**
		 * 倒计时函数
		 */
		onCountDown() {
			// 获取当前时间，同时得到活动结束时间数组
			let newTime = new Date().getTime();
			let endTimeList = this.actEndTimeList;
			let countDownArr = [];

			// 对结束时间进行处理渲染到页面
			endTimeList.forEach(o => {
				let endTime = new Date(Tools.formatDate(o)).getTime();
				let obj = null;

				// 如果活动未结束，对时间进行处理
				if (endTime - newTime > 0) {
					let time = (endTime - newTime) / 1000;
					// 获取天、时、分、秒
					let day = parseInt(time / (60 * 60 * 24));
					let hou = parseInt((time % (60 * 60 * 24)) / 3600);
					let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
					let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
					obj = {
						day: day,
						hou: this.timeFormat(hou),
						min: this.timeFormat(min),
						sec: this.timeFormat(sec)
					};
				} else {
					//活动已结束，全部设置为'00'
					obj = {
						day: '00',
						hou: '00',
						min: '00',
						sec: '00'
					};
				}
				countDownArr.push(obj);
			});
			// 渲染，然后每隔一秒执行一次倒计时函数
			this.countDownList = countDownArr;

			setTimeout(this.onCountDown, 1000);
		},
		/**
		 * 验证当前用户是否已参团
		 */
		checkUserIsJoin(users) {
			let user_id = Tools.getUserId();
			if (!user_id) {
				return false;
			}
			let isJoin = false;
			users.forEach(item => {
				user_id == item.user_id && (isJoin = true);
			});
			return isJoin;
		},
		/**
		 * 初始化商品多规格
		 */
		initGoodsDetailData(data) {
			goodsSpecArr = [];
			for (let i in data.spec_attr) {
				for (let j in data.spec_attr[i].spec_items) {
					if (j < 1) {
						data.spec_attr[i].spec_items[0].checked = true;
						goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
					}
				}
			}
			return data;
		},
		/**
		 * 查看拼团规则
		 */
		onTargetRules() {
			Route.navigateTo({
				url: '../rules/index'
			});
		},
		/**
		 * 显示拼团规则
		 */
		onToggleRules() {
			Dialog({
				title: '拼团规则',
				message: this.setting.basic.rule_detail,
				selector: 'ruleDialog',
				buttons: [
					{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}
				]
			});
		},
		/**
		 * 跳转商品详情页
		 */
		onTargetGoods(e) {
			let goodsId = e.currentTarget.dataset.id > 0 ? e.currentTarget.dataset.id : this.detail.goods_id;
			Route.navigateTo({
				url: '../goods/index?goods_id=' + goodsId
			});
		},
		/**
		 * 增加商品数量
		 */
		onIncGoodsNumber(e) {
			this.$saveFormId(e.detail.formId);
			this.goods_num = ++this.goods_num;
		},

		/**
		 * 减少商品数量
		 */
		onDecGoodsNumber(e) {
			this.$saveFormId(e.detail.formId);
			if (this.goods_num > 1) {
				this.setData({
					goods_num: --this.goods_num
				});
			}
		},
		/**
		 * 加入购物车and立即购买
		 */
		onCheckout(e) {
			// 表单验证
			if (!this.onVerify()) {
				return false;
			}
			// 立即购买
			Route.navigateTo({
				url:
					'../checkout/index?' +
					Tools.urlEncode({
						order_type: 20,
						active_id: this.detail.active_id,
						goods_id: this.goods.goods_id,
						goods_num: this.goods_num,
						goods_sku_id: this.goods_sku_id
					})
			});
		},
		/**
		 * 表单验证
		 */
		onVerify() {
			if (this.goods_num === '') {
				Tools.showError('请输入购买数量');
				return false;
			}
			// 将购买数量转为整型，防止出错
			this.goods_num = parseInt(this.goods_num);
			if (this.goods_num <= 0) {
				Tools.showError('购买数量不能为0');
				return false;
			}
			return true;
		},
		/**
		 * 预览Sku规格图片
		 */
		onPreviewSkuImage(e) {
			uni.previewImage({
				current: this.image_path,
				urls: [this.image_path]
			});
		},
		/**
		 * 确认购买弹窗
		 */
		onToggleTrade(e) {
			this.showBottomPopup = !this.showBottomPopup;
		},
		/**
		 * 立即下单
		 */
		onTriggerOrder(e) {
			this.onToggleTrade();
		},
		/**
		 * 跳转到拼团首页
		 */
		onTargetIndex(e) {
			Route.navigateTo({
				url: '../index/index'
			});
		}
	}
};
</script>

<style>
page {
	background: #f3f3f3;
}

view {
	word-break: break-all;
	/* overflow: auto; */
}

/* 箭头图标 */

.icon-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-width: 10rpx;
	border-style: solid;
	border-color: transparent transparent transparent #ccc;
}

/* 商品信息 */

.header {
	margin: auto;
	margin-top: 70rpx;
	padding: 30rpx 20rpx;
	width: 95%;
	background: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0px 5px 12px rgb(226, 226, 226);
}

.header .header_lf {
	box-shadow: 0px 2px 8px #e6e6e6;
	margin: -70rpx 20rpx 10rpx 10rpx;
}

.header .header_lf image {
	display: block;
	width: 320rpx;
	height: 320rpx;
}

.header .header_rt {
	background: #fff;
}

.header .header_rt .goods-name {
	display: block;
	font-size: 24rpx;
	line-height: 2;
}

.header .header_rt .goods-price {
	margin: 20rpx 10rpx;
}

.header .header_rt .goods-price .m-price {
	display: inline-block;
	font-size: 40rpx;
	color: #ff495e;
}

.header .header_rt .goods-price .line-price {
	display: inline-block;
	margin: 10rpx;
	font-size: 24rpx;
	color: #8e8e8e;
	text-decoration: line-through;
}

.header .header_rt .goods-tag .tag-item {
	display: inline-block;
	padding: 4rpx 12rpx;
	font-size: 24rpx;
	line-height: 36rpx;
	border-radius: 5rpx;
	color: #ff6464;
	background: #feeeee;
	margin-left: 10rpx;
	margin-bottom: 10rpx;
	box-sizing: border-box;
}

.header:after {
	display: block;
	clear: both;
	content: '';
	visibility: hidden;
	height: 0;
}

/* 拼团成员 */

.main {
	margin: auto;
	margin-top: 30rpx;
	padding: 50rpx 20rpx;
	width: 95%;
	background: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0px 5px 12px rgb(226, 226, 226);
}

.main .main_user {
	display: flex;
	margin: auto;
	width: 600rpx;
	flex-wrap: wrap;
	margin-bottom: 30rpx;
}

.main .main_user .user-item {
	width: 100rpx;
	height: 100rpx;
	margin: 0 25rpx 25rpx 0;
	position: relative;
	box-sizing: border-box;
}

.main .main_user .user-item:nth-child(5n + 0) {
	margin-right: 0;
}

.main .main_user .user-item image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1rpx solid #f3f3f3;
}

.main .main_user .user-item .user-role {
	width: 100%;
	text-align: center;
	height: 40rpx;
	position: absolute;
	left: 0;
	bottom: -1rpx;
}

.main .main_user .user-item .user-role text {
	background: #fa1e8c;
	border-radius: 15rpx;
	display: inline-block;
	line-height: 1.4;
	font-size: 24rpx;
	color: #fff;
	width: 78rpx;
}

.main .main_user .user-item.user-item__wait {
	border-radius: 50%;
	background: #f8f8f8;
	border: 1rpx dashed #dbdbdb;
}

.main .main_user .user-item.user-item__wait text {
	color: #dbdbdb;
	font-size: 38rpx;
}

/* 拼团状态 */

.main_status {
	margin-bottom: 40rpx;
	font-size: 35rpx;
	text-align: center;
}

.main_status__fail {
	color: #ff495e;
}

.main_status__success {
	color: #08b625;
}

.main_status .status-icon {
	margin-right: 15rpx;
}

/* 倒计时 */

.main_tiem .main_timer_color {
	color: #fc8434;
}

.main_tiem view {
	display: inline-block;
}

.main_tiem view text {
	display: inline-block;
	padding: 10rpx 5rpx;
	background: #e5e5e5;
}

.main button {
	display: block;
	margin-top: 40rpx;
	width: 350rpx;
	line-height: 90rpx;
	font-size: 29rpx;
	background: #fbeb4e;
	border: none;
	box-shadow: 0px 3px 12px #fbc293;
}

.main button:after {
	content: none;
	border: none;
}

/* 更多拼团 */

.content {
	margin: auto;
	margin-top: 30rpx;
	width: 95%;
	background: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0px 5px 12px rgb(226, 226, 226);
}

.content_top {
	padding: 35rpx 20rpx;
	display: flex;
	padding-bottom: 30rpx;
	justify-content: space-between;
	align-items: center;
}

.content_main {
	padding: 25rpx;
	justify-content: space-between;
	border-top: 1rpx solid rgb(238, 238, 238);
}

.content_main .goods-image {
	width: 240rpx;
	height: 240rpx;
	border-radius: 10rpx;
}

.content_main .goods-image image {
	display: block;
	width: 100%;
	height: 100%;
}

.content_main .goods-detail {
	position: relative;
	width: 410rpx;
}

.content_main .goods-detail .goods-name {
	font-size: 24rpx;
	line-height: 2;
	height: 96rpx;
}

.content_main .goods-detail .goods-sales {
	margin: 20rpx 0;
	font-size: 24rpx;
	color: #fc8434;
}

.content_main .goods-detail .goods-detail_bottom {
	overflow: hidden;
	height: 55rpx;
}

.content_main .goods-detail .goods-detail_bottom .bottom-right {
	height: 100%;
	line-height: 1;
}

.content_main .goods-detail .goods-price {
	font-size: 38rpx;
}

.content_main .goods-detail .line-price {
	margin: 0 20rpx 0 10rpx;
	font-size: 24rpx;
	color: #8e8e8e;
	text-decoration: line-through;
}

.content_main .goods-detail .btn-navie {
	margin: 0;
	padding: 0;
	width: 130rpx;
	background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
	line-height: 55rpx;
	height: 100%;
	color: #fff;
	font-size: 26rpx;
}

/* 拼团须知 */

.notice {
	display: flex;
	margin: auto;
	margin-top: 30rpx;
	padding: 35rpx 20rpx;
	width: 95%;
	background: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0px 5px 12px rgb(226, 226, 226);
	justify-content: space-between;
	align-items: center;
}

.notice .t-brief {
	font-size: 25rpx;
	color: #a6a6a6;
}

/* 确认购买弹窗 */

.popup__trade {
	width: 750rpx;
	position: relative;
	padding-bottom: 92rpx;
	z-index: 999;
}

.popup__trade .trade-close {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 50rpx;
	height: 50rpx;
}

.popup__trade .trade-main {
	background: #fff;
	box-sizing: border-box;
	padding: 24rpx;
}

.popup__trade .footer-fixed {
	position: absolute;
}

.popup__trade .footer-fixed .order-bt {
	width: 100%;
	line-height: unset;
}

.popup__trade .footer-fixed .default-btn {
	width: 100%;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	line-height: 92rpx;
}

.popup__trade .trade-main .goods-info {
	margin-bottom: 10rpx;
}

.popup__trade .trade-main .goods-info .goods-image {
	margin-top: -40px;
	margin-right: 20rpx;
}

.popup__trade .trade-main .goods-info .goods-image image {
	width: 90px;
	height: 90px;
	border: 5rpx solid #fff;
	box-shadow: 0 4rpx 10rpx rgba(220, 220, 220, 0.79);
}

.popup__trade .trade-main .goods-info .money-box {
	margin: 0;
	box-sizing: border-box;
}

.popup__trade .trade-main .goods-info .goods-stock {
	padding-left: 10rpx;
}

.popup__trade .trade-main .buy_number {
	margin: 20rpx 0;
	justify-content: space-between;
}

.popup__trade .trade-main .buy_number .buyNumber {
	color: #888;
	background: #fff;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

/* 商品规格 */

.goods-list-box .tmall-types.mb20 {
	margin-bottom: 20rpx;
}

.goods-list-box .tmall-types .tipstxt {
	font-size: 26rpx;
	color: #888;
	margin-bottom: 10rpx;
}

.goods-list-box .tmall-types .cartypelist {
	display: inline-block;
}

.goods-list-box .tmall-types .cartypelist .cartypeitem {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 55rpx;
	padding: 0 30rpx;
	margin: 0 20rpx 20rpx 0;
	border-radius: 8rpx;
	color: #888;
	border: 1px solid #e6e6e6;
}

.goods-list-box .tmall-types .cartypelist .cartypeitem.cur {
	background: #f20c59;
	border: 1rpx solid #f20c59;
	color: #fff;
}

.goods-list-box .tmall-types .cartypelist .cartypeitem.cur:after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	display: inline-block;
	width: 16rpx;
	height: 16rpx;
}

.goods-list-box .tmall-types .cartypelist .cartypeitem.disabled {
	color: #dedede;
	cursor: not-allowed;
	background: #eee;
	border: 2rpx dashed #dedede;
}

/* 商品价格 */

.money-box {
	margin: 10rpx 0;
}

.money-box .price {
	font-size: 40rpx;
}

.money-box .del {
	font-size: 24rpx;
	color: #999;
	margin-left: 6rpx;
	text-decoration: line-through;
}
</style>
